<template>
    <div class='my-protect-record'>
        <public-head>
            <span>我的报修记录</span>
        </public-head>
        <div class="sub-nav">
            <router-link to="/myprotectrecord" replace exact tag="div">
                <span>进行中</span>
            </router-link>
            <router-link to="/myprotectrecord/over" replace tag="div">
                <span>已结束</span>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
@import '../../common/style/transition.less';
@import '../../common/style/mixin.less';
.my-protect-record {
    .init;
    .sub-nav {
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 0.8rem;
        font-size: 0.24rem;
        background: #fff;
        .bor1pxTop;
        div {
            flex: 1;
            span {
                line-height: 0.8rem;
                padding: 0 0.1rem;
                color: #404040;
                margin-bottom:1px;
            }
            &.active {
                span {
                    color: #5b91fe;
                    border-bottom: 1px solid #5b91fe;
                }
            }
        }
    }
}
</style>